<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head">
				<view class="search_nav flex-box">
					<input type="text" confirm-type="search" @confirm="bindInputSearch" v-model="query.q"
						placeholder="搜索您要找的零工" class="flex-grow-1 pr30 fs24 col1" placeholder-class="cola5" />
					<image src="https://admin.mosizp.cn/static/public/icon_search1.png" mode="aspectFill" class="ico32"
						@click="bindInputSearch"></image>
				</view>
			</view>
			<view class="pt116 plr30 pb30">
				<view class="box">
					<view class="link" @click="bindCagegoryChange(0)">
						<image src="https://admin.mosizp.cn/static/public/icon12.png" mode="aspectFill" class="ico60"></image>
						<view class="mt25 fwb fs28 col3">全部</view>
					</view>
					<view class="link" v-for="category in taskCategories" @click="bindCagegoryChange(category.id)">
						<image :src="cdnurl(category.image)" mode="aspectFill" class="ico60"></image>
						<view class="mt25 fwb fs28 col3">{{category.name}}</view>
					</view>

				</view>
				<view class="tab_nav flex-box flex-between" :class="[filterShow?'fixed plr30':'']">
					<view class="tab_item flex-box" :class="[filterIndex==0?'active':'']" @click="chooseItem(0)">
						<view class="col6 fs28">性别限制</view>
					</view>
					<view class="tab_item flex-box" :class="[filterIndex==1?'active':'']" @click="chooseItem(1)">
						<view class="col6 fs28">价格</view>

					</view>
					<view class="tab_item flex-box" :class="[filterIndex==2?'active':'']" @click="chooseItem(2)">
						<view class="col6 fs28">工种</view>

					</view>
					<view class="tab_item flex-box" :class="[filterIndex==3?'active':'']" @click="chooseItem(3)">
						<view class="col6 fs28">区域</view>

					</view>
				</view>
				<view class="tab_nav" v-if="filterShow"></view>
				<template v-if="taskGroup=='employer'">
					<odd-person-list :resumes="resumeLists"></odd-person-list>
					<view class="nothing" v-if="resumeMore.nothing">
						<image src="/static/icon/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无零工人才</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetchResume()">{{resumeMore.text}}</view>
					</view>
				</template>
				<template v-else>
					<task-list :tasks="taskLists"></task-list>
					<view class="nothing" v-if="taskMore.nothing">
						<image src="/static/icon/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无零工</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetch()">{{taskMore.text}}</view>
					</view>
				</template>
			</view>

		</view>
		<movable-area class="movable-area">
			<movable-view class="movable-view flex-col" direction="all" inertia x="600rpx" y="800rpx">
				<!-- 雇主 -->
				<button hover-class="none" @click="bindChange('employer')" v-if="taskGroup=='user'"
					style="margin-bottom: 25rpx;">
					<image src="https://admin.mosizp.cn/static/public/btn_switch.png" mode="aspectFill" class="imgm"></image>
				</button>
				<!-- 个人 -->
				<button hover-class="none" @click="bindChange('user')" v-else style="margin-bottom: 25rpx;">
					<image src="https://admin.mosizp.cn/static/public/btn_switch_person.png" mode="aspectFill" class="imgm"></image>
				</button>
				<!-- 发布 -->
				<button hover-class="none" @click="bindPublish()">
					<image src="https://admin.mosizp.cn/static/public/btn_publish.png" mode="aspectFill" class="imgm"></image>
				</button>
			</movable-view>
		</movable-area>
		<u-popup :show="filterShow" mode="top" :safeAreaInsetBottom="false" @close="bindClose" bgColor="transparent">
			<view class="popup">
				<scroll-view scroll-y="true" class="pop_scroll">

					<template v-if="filterIndex==0">
						<view class="fs32 fwb col3 mt20">性别要求</view>
						<view class="pt15">
							<view class="scroll_item m-ellipsis" @click="bindSearchChange('gender',item.id)"
								:class="{active: query.gender==item.id}" v-for="(item,index) in gender">{{item.name}}
							</view>

						</view>
					</template>
					<template v-if="filterIndex==1">
						<view class="fs32 fwb col3 mt20">价格要求</view>
						<view class="pt15">
							<view class="scroll_item m-ellipsis" @click="bindSearchChange('is_bargaining',item.id)"
								:class="{active: query.is_bargaining==item.id}" v-for="(item,index) in isBargaining">
								{{item.name}}
							</view>
						</view>
					</template>
					<template v-if="filterIndex==2">
						<view class="fs32 fwb col3 mt20">工种要求</view>
						<view class="pt15">
							<view class="scroll_item m-ellipsis" :class="{active:query.category_id==0}"
								@click="bindSearchChange('category_id',0)">不限</view>
							<view class="scroll_item m-ellipsis" :class="{active:query.category_id==item.id}"
								@click="bindSearchChange('category_id',item.id)" v-for="(item,index) in taskCategories">
								{{item.name}}
							</view>

						</view>
					</template>
					<template v-if="filterIndex==3">
						<view class="city_item" :class="{active:query.district_id==-1}"
							@click="bindSearchChange('district_id',-1)">不限</view>
						<view class="city_item" @click="bindSearchChange('district_id',item.id)"
							:class="{active:query.district_id==item.id}" v-for="(item,index) in districts">{{item.name}}
						</view>
					</template>
					<view class="pt30"></view>
				</scroll-view>
				<view class="pop_bottom flex-box">
					<view class="bt1" @click="bindSearchReset()">重置</view>
					<view class="bt2" @click="bindSearchConfirm()">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import taskList from '../../components/task-list/task-list.vue';
	import oddPersonList from '../../components/odd-person-list/odd-person-list.vue';
	const app = getApp();
	export default {
		components: {
			taskList,
			oddPersonList
		},
		data() {
			return {

				megNum: 0,
				userinfo: null,
				taskCategories: [],
				gender: [{
					id: 0,
					name: '不限'
				}, {
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				isBargaining: [{
					id: 0,
					name: '不限'
				}, {
					id: 1,
					name: '可议价'
				}, {
					id: 2,
					name: '一口价'
				}],
				districts: [],
				filterIndex: '-1',
				filterShow: false,
				query: {
					q: '',
					gender: '',
					category_id: 0,
					district_id: 0,
					is_bargaining: 0,
					sort: 'view_num',
					order: 'desc'
				},
				taskGroup: 'user',
				taskLists: [],
				taskMore: {
					page: 1
				},
				resumeLists: [],
				resumeMore: {
					page: 1
				},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			let page = this;
			if(this.$core.getUserinfo()){
				this.userinfo = this.$core.getUserinfo();
				this.taskGroup = this.$core.getCache("task_group")
			}
			this.refreshPage()
			uni.$on("changeTaskEmployer", function(data) {
				page.taskGroup = page.$core.getCache("task_group");
				if (page.taskGroup == 'user') {
					page.refreshPage();
				} else {
					page.refresh()
				}
			});
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
			uni.$on(app.globalData.Events.UserLogout, this.eventOnUserLogout, this);
			//未读消息
			if (app.globalData.chat_config.SocketTask) {
				this.$chatIM.setMessageBadge(false)
			}
			uni.$on(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount, this);
		},
		onReachBottom() {
			this.fetch();
		},
		onUnload() {
			uni.$off("changeTaskEmployer");
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin);
			uni.$off(app.globalData.Events.UserLogout, this.eventOnUserLogout);
			uni.$off(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);
		},
		onPullDownRefresh() {
			this.refreshPage()
		},
		onShareAppMessage(e) {

		},
		onShareTimeline() {

		},
		methods: {
			bindCagegoryChange(id) {
				this.query.category_id = id;
				this.refresh();
			},
			chooseItem(index) {
				this.filterIndex = index;
				this.filterShow = true

			},
			bindClose() {
				this.filterShow = false
				this.filterIndex = '-1'
			},
			//普通搜索
			bindInputSearch(event) {
				this.refresh();
			},
			//栏目搜索
			bindSearchChange(field, value) {
				this.query[field] = value;
			},
			bindSearchConfirm() {
				this.bindClose();
				this.refresh();
			},
			bindSearchReset() {
				this.query.category_id = 0;
				this.query.gender = 0;
				this.query.sort = 'view_num';
				this.query.district_id = 0;
				this.bindClose();
				this.refresh();
			},
			fetchResume() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.task/resume', query, 'resumeMore', 'resumeLists', 'data', data => {

				})
			},
			refreshPage() {
				this.$util.getTastCategory(false).then(items => {
					this.taskCategories = items;
				})
				this.$util.getAreas(null, false).then(districts => {
					this.districts = districts;
				});
				this.bindSearchReset();
				uni.stopPullDownRefresh();
			},
			refresh() {
				if (this.taskGroup === 'employer') {
					this.resumeLists = [];
					this.resumeMore = {
						page: 1
					};
					this.fetchResume();
				} else {
					this.taskLists = [];
					this.taskMore = {
						page: 1
					};
					this.fetch();
				}
			},
			fetch() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.task/index', query, 'taskMore', 'taskLists', 'data', data => {

				})
			},
			bindPublish() {
				uni.navigateTo({
					url: '/pages/public/publish_odd_job'
				})
			},
			//切换角色
			bindChange(taskGroup) {
				let page = this;
				
				uni.showModal({
					title: '切换提示',
					content: "确定要切换身份",
					success(res2) {
						
						if (res2.confirm) {
							if (taskGroup == 'employer') {
								page.$core.post({
									url: 'xilujob.task/change_task_group',
									data: {},
									success: (ret) => {
										page.$core.setCache("task_group", taskGroup)
										uni.$emit("changeTaskEmployer", {})
									},
									fail: err => {
										let showCancel = err.code == 3 ? true : false;
										uni.showModal({
											title: '提示',
											content: err.msg,
											showCancel: showCancel,
											success(res) {
												if (res.confirm) {
													uni.navigateTo({
														url: '/pages/public/publish_odd_job'
													})
												}

											}
										})
										return false;
									}
								})
							} else {
								page.$core.setCache("task_group", taskGroup)
								uni.$emit("changeTaskEmployer", {})
							}
						}
					}
				})
			},
			eventOnUserLogin(userinfo) {
				this.userinfo = userinfo;
				this.refreshPage();
			},
			eventOnUserLogout() {
				this.userinfo = null;
				this.refreshPage();
			},
			//未读消息
			eventWebsocketMessageCount(data) {
				this.megNum = this.userinfo ? app.globalData.chat_config.messageCount : 0;
				// this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-head {
		background: var(--primary);
		padding: 10rpx 30rpx 20rpx;

		.search_nav {
			width: 690rpx;
			height: 86rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 0 30rpx;
		}
	}

	.pt116 {
		padding-top: 116rpx;
	}

	.box {
		width: 690rpx;
		padding: 40rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
		border-radius: 20rpx;
		margin-top: 30rpx;

		.link {
			display: inline-block;
			vertical-align: top;
			width: 20%;
			margin-top: 45rpx;
			text-align: center;

			&:nth-of-type(-n+5) {
				margin-top: 0;
			}
		}
	}

	.tab_nav {
		width: 100%;
		height: 104rpx;
		padding-top: 40rpx;
		padding-bottom: 30rpx;

		&.fixed {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 10077;
			background: #fff;
			height: 104rpx;
			top: 0;
		}

		.tab_item {
			height: 34rpx;

			&::after {
				content: '';
				width: 0px;
				height: 0px;
				border: 10rpx solid #666;
				border-left-color: transparent;
				border-right-color: transparent;
				border-top-color: #999999;
				border-bottom-color: transparent;
				margin-left: 16rpx;
				margin-top: 10rpx;
				line-height: 84rpx;
			}

			&.active::after {
				border-left-color: transparent;
				border-right-color: transparent;
				border-top-color: transparent;
				border-bottom-color: var(--primary);
				margin-top: -5rpx
			}
		}
	}




	.movable-area {
		pointer-events: none;
		z-index: 100;
		width: 100%;
		height: calc(100vh - 156rpx);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
	}

	.movable-view {
		pointer-events: auto;
		width: 128rpx;
		height: 282rpx;
		border-radius: 50%;
		// background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid #7BBCE1;
	}

	.movable-view button {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		display: block;
	}

	.movable-view .img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.popup {
		background: #fff;
		margin-top: 104rpx;

		.pop_tab_nav {
			height: 85rpx;
			padding: 0 45rpx;
		}

		.pop_scroll {
			height: 630rpx;
			padding: 0 0 0 45rpx;

			.scroll_item {
				border: 1px solid #F5EEEE;
				width: 152rpx;
				height: 65rpx;
				line-height: calc(65rpx - 2px);
				text-align: center;
				color: #666666;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
				margin-top: 20rpx;
				padding: 0 10rpx;
				display: inline-block;
				vertical-align: top;

				&.active {
					border: 1px solid var(--primary);
					color: var(--primary);
				}
			}
		}

		.pop_bottom {
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			padding-left: 45rpx;
			padding-right: 30rpx;

			.bt1 {
				width: 152rpx;
				height: 74rpx;
				background: var(--primary1);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: var(--primary);
				line-height: 74rpx;
				text-align: center;
			}

			.bt2 {
				margin-left: 35rpx;
				width: 486rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background: var(--primary);
				border-radius: 8rpx;
			}
		}

		.city_item {

			font-size: 26rpx;
			color: #333333;
			line-height: 100rpx;

			&.active {
				font-weight: bold;
				color: var(--primary);
			}
		}
	}
</style>